<!--
 * @Description: es6实现ToDoList
 * @Version: 1.0
 * @Autor: Yu
 * @Date: 2022-01-02 15:18:35
 * @LastEditors: Yu
 * @LastEditTime: 2022-07-24 16:06:23
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToDoList</title>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/index.css">   
  </head>
  <body>
    <div class="contonter">
      <!-- 头部开始 -->
      <header>
          <input type="text" id="ipt" placeholder="请输入你的任务名称，按回车键确认"/>
      </header>
      <!-- 头部结束 -->

      <!-- 内容部分开始 -->
      <section>
          <ul id="lis">
              <li class="empty">暂无数据</li>
          </ul>          
      </section>
      <!-- 内容部分结束 -->

      <!-- 底部开始 -->
      <footer>
          <div class="footer_left">
              <input type="checkbox" id="done"/>已完成<span class="done"></span>/全部<span class="all"></span>
          </div>
          <div class="footer_right">
              <button id="del_done">清除已完成任务</button>
          </div>
      </footer>
      <!-- 底部结束 -->
    </div>
     <!-- 引入js文件 -->
    <script src="./js/index.js"></script>
  </body>
</html>
